<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.modal.add()">{{ $t('add') }}</a-button>
    </div>
    <s-table ref="table" rowKey="id" :data="loadData" size="default" :showPagination="false">
      <a-table-column title="菜单名称" dataIndex="title" key="title" style="min-width: 220px;">
        <template #customRender="text, record">
          <a-icon :type="record.icon" />
          {{ $t(record.title) }}
        </template>
      </a-table-column>
      <a-table-column title="类型" dataIndex="type" key="type" align="center" :width="100">
        <template slot-scope="text">
          <a-tag :color="text | typeColorFilter">{{ text | typeNameFilter }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column title="路由名称" dataIndex="routerName" key="routerName" :width="180" />
      <a-table-column title="重定向" dataIndex="redirect" key="redirect" />
      <a-table-column title="组件" dataIndex="component" key="component" :width="120">
        <template slot-scope="text">
          <a-tag :color="text | componentColorFilter">{{ text }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column title="权限标识" dataIndex="permissions" key="permissions" :width="180" />
      <a-table-column title="排序" dataIndex="sort" key="sort" align="center" :width="80" />
      <a-table-column title="操作" key="action" align="center" :width="120">
        <template slot-scope="text, record">
          <a @click="handleEdit(record)">修改</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </template>
      </a-table-column>
    </s-table>
    <menu-form-modal ref="modal" @ok="handleOk" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getMenuList, deleteMenu } from '@/api/sys'
import { listToTree } from '@/utils/util'
import CreateForm from '../list/modules/CreateForm'
import MenuFormModal from './modules/MenuFormModal'
import indexOf from 'lodash.indexof'

const typeMap = {
  0: {
    color: 'green',
    text: '菜单'
  },
  1: {
    color: '',
    text: '按钮'
  }
}

const layoutComponentsMap = ['PageView', 'RouteView', 'BlankLayout', 'UserLayout']

export default {
  name: 'Menu',
  data() {
    return {
      // 查询参数
      queryParam: {},
      // 加载表格数据
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getMenuList(Object.assign(parameter, this.queryParam)).then(res => {
          const childrenList = []
          listToTree(res.data, childrenList, '0')
          res.data = childrenList
          console.log('res.data', res.data)
          return res
        })
      }
      // custom table alert & rowSelection
      // 表格列表可选配置
      // rowSelection: {
      //   onChange: (selectedRowKeys, selectedRows) => {
      //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
      //   },
      //   onSelect: (record, selected, selectedRows) => {
      //     console.log(record, selected, selectedRows)
      //   },
      //   onSelectAll: (selected, selectedRows, changeRows) => {
      //     console.log(selected, selectedRows, changeRows)
      //   }
      // }
    }
  },
  components: {
    STable,
    CreateForm,
    MenuFormModal
  },
  methods: {
    handleEdit(record) {
      console.log(record)
      this.$refs.modal.edit(record)
    },
    handleDelete(record) {
      console.log(record.id)
      deleteMenu(record.id)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message.success(`'删除菜单 ${record.title} 成功'`, 3)
          }
          this.handleOk()
        })
        .catch(() => {})
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    log(val) {
      console.log(val)
    }
  },
  filters: {
    typeNameFilter(type) {
      return typeMap[type].text
    },
    typeColorFilter(type) {
      return typeMap[type].color
    },
    componentColorFilter(component) {
      return indexOf(layoutComponentsMap, component) > -1 ? 'cyan' : ''
    }
  }
}
</script>

<style></style>
